<template>
    <div>
        <Row>
            <Col span="6">费用大类</Col>
            <Col span="17">
            <Row>
                <Col span="9">使用项目</Col>
                <Col span="5">小计(元)</Col>
                <Col span="5">计划实施月份</Col>
                <Col span="5">操作</Col>
            </Row>
            </Col>
        </Row>
        <template v-for="(item,i) in list">
            <Row :key="i">
                <Col span="6">
                <p :key="i">{{item.content}}</p>
                </Col>
                <Col span="17">
                <template v-for="(item,j) in item.children">
                    <dynamic-table-item :key="item.id" @del-item="delItem(i,j)">
                    </dynamic-table-item>
                </template>
                </Col>
                <Button icon="md-add" type="primary" shape="circle" @click="addItem(i)"></Button>
            </Row>
        </template>
    </div>
</template>
<script>
import DynamicTableItem from './dynamic-table-item'

export default {
    name: "DynamicTable",
    components: { DynamicTableItem },
    data() {
        return {
            list: [
                {
                    content: '完善改造和维护安全防护设备支出',
                    children: [
                        {
                            id: Symbol(),
                            name: '项目1',
                            money: 12,
                            month: 2
                        }
                    ]
                }
            ]
        }
    },
    methods: {
        init() {

        },
        addItem(i) {
            this.list[i].children.push({
                id: Symbol(),
                name: '项目1',
                money: 12,
                month: 2
            })
        },
        delItem(i, j) {
            this.list[i].children.splice(j, 1)
        }
    },
    mounted() {
        this.init();
    }
}
</script>
<style lang="less">
</style>